<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="学习他人" name="first">
        <ul>
            <li v-for="item in ClassroomList" :key="item.id">
                <span class="Classroom-new" @click="GoDetail(item)" :id="item.id">{{item.title}}</span>
                <span class="Classroom-time">{{item.publishTime}}</span>
            </li>
        </ul>
        <div v-if="ClassroomList.length>0">
            <Pagination-two :total="total" :params="params" :get="get"></Pagination-two>
        </div>
    </el-tab-pane>
    <el-tab-pane label="武装自己" name="second">
        <ul>
            <li v-for="item in ClassroomList2" :key="item.id">
                <span class="Classroom-new" @click="GoDetail2(item)" :id="item.id">{{item.title}}</span>
                <span class="Classroom-time">{{item.publishTime}}</span>
            </li>
        </ul>
        <div v-if="ClassroomList2.length>0">
            <Pagination-two :total="total2" :params="params2" :get="gett"></Pagination-two>
        </div>
    </el-tab-pane>
</el-tabs>
</template>

<script>
import PaginationTwo from "@/components/Pagination/PaginationTwo.vue";

export default {
    components: {
        PaginationTwo,
    },
    data() {
        return {
            activeName: this.$store.state.outsideActive,
            ClassroomList: [],
            ClassroomList2: [],
            // 总条数
            total: 0,
            total2: 0,
            //  参数1
            params: {
                pageNum: 1,
                pageSize: 10,
            },
            //  参数2
            params2: {
                pageNum: 1,
                pageSize: 10,
            },
        };
    },
    created() {
        this.get();
        this.gett();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //学习他人
        get() {
            this.Api.getoutside(this.params).then((res) => {
                this.ClassroomList = res.data.records;
                // console.log(this.ClassroomList);
                this.total = res.data.total;
            });
        },
        //武装自己
        gett() {
            this.Api.getarmed(this.params2).then((res) => {
                this.ClassroomList2 = res.data.records;
                // console.log(this.ClassroomList);
                this.total2 = res.data.total;
            });
        },
        GoDetail(item) {
            //详情页跳转
            let ID = {
                id: item.id
            };
            this.$router.push({
                name: "DetailStudy",
                query: {
                    id: item.id
                }
            });
        },
        GoDetail2(item) {
            let ID = {
                id: item.id
            };
            this.$router.push({
                name: "DetailArmod",
                query: {
                    id: item.id
                }
            });
        },
    },
};
</script>

<style scoped>
ul li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    padding-top: 25px;
    cursor: pointer;
}

ul li:hover {
    background-color: rgba(221, 33, 38, 0.03);
    ;
}

ul li .Classroom-new {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 66px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 736px;
}

ul li .Classroom-time {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 66px;
}

li span:first-child:hover {
    color: red;
}
</style>
